<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="../../css/materialize.min.css" media="screen,projection"/>
    <link type="text/css" rel="stylesheet" href="../../css/nav.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>联系人列表</title>
</head>

<body>
<nav>
    <div class="nav-wrapper blue">
        <a href="/toInformation" class="brand-logo" id="logo">呜呼</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down " style="margin-left: 82px">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
        </ul>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="/toContact"><i class="material-icons">chat_bubble_outline</i></a></li>
            <li><a href="/toPersonalCenter"><i class="material-icons">perm_identity</i></a></li>
            <li><a href="#"><i class="material-icons">more_vert</i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo" style="z-index: 10000">
            <li><a href="/toIndex">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="/toWriteQuestion">提问</a></li>
            <li><a href="#">联系人</a></li>
            <li><a href="/toPersonalCenter">个人中心</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
</nav>


<div class="container">
    <ul class="collection" id="friendList">
        <!--<li class="collection-item avatar dis">-->
            <!--<img src="../../img/yuna.jpg" alt="" class="circle">-->
            <!--<span class="title">张力</span>-->
            <!--<p>账号：702151478@qq.com</p>-->
            <!--<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>-->
        <!--</li>-->
    </ul>
</div>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/materialize.min.js"></script>
<script>
    $(document).ready(function(){
        $("#sidenav").sideNav();
        $(".button-collapse").sideNav({draggable: true});
        $("#leftnavbar").on("click",function () {
            $('.button-collapse').sideNav('hide');
        });
    });

    $.ajax({
        url : '/users/getMyFriend',
        type : "get",
        dataType : "json",
        success : function(data, textStatus, jqXHR) {
            if ('success' == textStatus) {
                // 这里要操作dom
                let friendList = document.getElementById("friendList");
                for (let i = 0;i < data.length; i++)
                {
                    let li = document.createElement("li");
                    li.setAttribute("class","collection-item avatar dis");
                    li.innerHTML = "<img src=\"../../img/yuna.jpg\" alt=\"\" class=\"circle\">\n" +
                        "            <span class=\"title\">好友昵称："+ data[i].nikeName +"</span>\n" +
                        "            <p>账号："+ data[i].account +"</p>\n" +
                        "            <a href=\"#!\" class=\"secondary-content\"><i class=\"material-icons\">grade</i></a>";
                    friendList.appendChild(li);
                    console.log("data===="+data[i].account);

                }
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error");
        }
    });

</script>
</body>
</html>